<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线考试系统 - 排名查询</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 与 student/score.html 保持一致 */
        :root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --student-accent: #4361ee;
            --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fb;
            color: #333;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 导航栏样式（与主页面一致） */
        .navbar {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 0.8rem 1rem;
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
        }

        .navbar-brand i {
            margin-right: 10px;
            font-size: 1.8rem;
        }

        .nav-link {
            color: rgba(255, 255, 255, 0.85) !important;
            font-weight: 500;
            padding: 0.5rem 1rem !important;
            border-radius: 4px;
            margin: 0 3px;
            transition: var(--transition);
        }

        .nav-link:hover, .nav-link.active {
            background-color: rgba(255, 255, 255, 0.15);
            color: white !important;
        }

        /* 主内容区域 */
        .main-content {
            flex: 1;
            padding: 2rem 0;
        }

        .card {
            border: none;
            border-radius: 12px;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            height: 100%;
            overflow: hidden;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }

        .card-header {
            background: white;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            padding: 1.25rem 1.5rem;
            font-weight: 700;
            display: flex;
            align-items: center;
        }

        .card-header i {
            margin-right: 10px;
            font-size: 1.25rem;
            color: var(--student-accent);
        }

        .card-body {
            padding: 1.5rem;
        }

        .card-title {
            font-weight: 700;
            margin-bottom: 0.75rem;
        }

        .card-text {
            color: #6c757d;
            margin-bottom: 1.5rem;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--student-accent), #3a0ca3);
            border: none;
            padding: 0.5rem 1.5rem;
            font-weight: 600;
            border-radius: 8px;
            transition: var(--transition);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(67, 97, 238, 0.4);
        }

        /* 页脚样式（与主页面一致） */
        .footer {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 2rem 0;
            margin-top: auto;
        }

        .footer-title {
            font-weight: 700;
            margin-bottom: 1rem;
            font-size: 1.25rem;
        }

        .footer-links {
            list-style: none;
            padding: 0;
        }

        .footer-links li {
            margin-bottom: 0.5rem;
        }

        .footer-links a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            transition: var(--transition);
        }

        .footer-links a:hover {
            color: white;
            text-decoration: underline;
        }

        .social-icons {
            display: flex;
            gap: 15px;
            margin-top: 1rem;
        }

        .social-icons a {
            color: white;
            font-size: 1.5rem;
            transition: var(--transition);
        }

        .social-icons a:hover {
            transform: translateY(-3px);
        }

        .copyright {
            text-align: center;
            padding-top: 1.5rem;
            margin-top: 1.5rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
        }

        @media (max-width: 768px) {
            .navbar-brand {
                font-size: 1.2rem;
            }
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container">
        <a class="navbar-brand" href="#">
            <i class="fas fa-graduation-cap"></i>在线考试系统
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="#"><i class="fas fa-home"></i> 主页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/exam/list"><i class="fas fa-pen-alt"></i> 参与考试</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/score/list"><i class="fas fa-chart-line"></i> 成绩查询</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/resources"><i class="fas fa-book-open"></i> 学习资源</a>
                </li>
            </ul>

            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/profile">
                        <i class="fas fa-user-circle"></i> 个人信息
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/notifications">
                        <i class="fas fa-bell"></i> 通知
                        <span class="badge bg-danger">3</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/logout">
                        <i class="fas fa-sign-out-alt"></i> 退出登录
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 主内容区域 -->
<div class="main-content">
    <div class="container">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-trophy"></i> 排名查询
            </div>
            <div class="card-body">
                <h5 class="card-title">我的考试排名</h5>
                <p class="card-text">查看您在班级或年级中的考试排名。</p>
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>课程名称</th>
                        <th>排名</th>
                        <th>分数</th>
                        <th>班级</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>高等数学</td>
                        <td>5</td>
                        <td>92</td>
                        <td>2023级计算机1班</td>
                    </tr>
                    <tr>
                        <td>英语</td>
                        <td>3</td>
                        <td>88</td>
                        <td>2023级计算机1班</td>
                    </tr>
                    <tr>
                        <td>计算机基础</td>
                        <td>10</td>
                        <td>75</td>
                        <td>2023级计算机1班</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer class="footer">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 mb-4 mb-lg-0">
                <h5 class="footer-title">在线考试系统</h5>
                <p>提供安全、可靠的在线考试解决方案，服务于教育机构与企业培训。</p>
                <div class="social-icons">
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-qq"></i></a>
                    <a href="#"><i class="fab fa-weibo"></i></a>
                    <a href="#"><i class="fab fa-github"></i></a>
                </div>
            </div>

            <div class="col-lg-2 col-md-4 mb-4 mb-md-0">
                <h5 class="footer-title">快速链接</h5>
                <ul class="footer-links">
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">服务条款</a></li>
                    <li><a href="#">隐私政策</a></li>
                    <li><a href="#">帮助中心</a></li>
                </ul>
            </div>

            <div class="col-lg-3 col-md-4 mb-4 mb-md-0">
                <h5 class="footer-title">联系我们</h5>
                <ul class="footer-links">
                    <li><i class="fas fa-envelope me-2"></i> contact@examsystem.com</li>
                    <li><i class="fas fa-phone me-2"></i> 15388254362 </li>
                    <li><i class="fas fa-map-marker-alt me-2"></i> 北京城市学院3s117</li>
                </ul>
            </div>

            <div class="col-lg-3 col-md-4">
                <h5 class="footer-title">系统信息</h5>
                <div class="alert alert-light small">
                    <i class="fas fa-info-circle me-2"></i>
                    当前版本 v1.0.0 | 最后更新 2025-06-08
                </div>
                <div class="d-grid gap-2">
                    <button class="btn btn-light btn-sm">
                        <i class="fas fa-download me-2"></i> 下载移动端
                    </button>
                </div>
            </div>
        </div>

        <div class="copyright">
            &copy; 2025 在线考试系统 版权所有 | 北城在线考试系统小组
        </div>
    </div>
</footer>

<!-- Bootstrap JS -->
<script src="/js/bootstrap.bundle.min.js"></script>
</body>
</html>
